<template>
	<view class="car">
		<!--顶部标题0的布局样式-->
		<view class="  commoncss0   " style="top: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
			<view class="cu-bar bg-white">
				<view class="action">
				</view>
				<view class="content text-bold text-">购物车 </view>
			</view>
		</view>

		<!-- 购物车商品 -->
		<template v-if="all_num>0">
			<view class="car_home_box">
				<view class="all_select_box">
					<view class="select_box" @click="clickAllSelect">
						<view class="select_icon" :class="is_all_checked?'active':''">
							<image v-if="is_all_checked" :lazy-load="true" src="/static/icon/car/yes.svg" mode="widthFix">
							</image>
						</view>
						<text>全选择</text>
					</view>
					<!-- <view style="padding: 0 10rpx;" @click.stop="clearCar">清空</view> -->
				</view>

				<view class="car_home_foods">
					<view class="car_food_item" v-for="(item,index) in goodsCars" :key="index" @click="toGoodsDetail(item.goodsId)">
						<!--  商品选中 -->
						<view class="select_box" @click.stop="clickSingleGood(index,item)">
							<view class="select_icon" :class="item.checked?'active':''">
								<image v-if="item.checked" :lazy-load="true" src="/static/icon/car/yes.svg" mode="widthFix">
								</image>
							</view>
						</view>

						<!--  商品图片 -->
						<view class="car_food_info">
							<view class="car_food_img">
								<block v-if="item.coverPic">
									<image class="food_img" :src="item.coverPic" mode="aspectFill"></image>
								</block>
								<block v-else>
									<image class="food_img default" src="@/static/icon/car/default_good1.png" mode="aspectFill">
									</image>
								</block>
							</view>
							<!--  商品名称 + 删除按钮 -->
							<view class="car_food_right">
								<view class="car_food_top">
									<view class="car_food_left">
										<view class="car_food_name">{{item.goodsName}}</view>
										<view class="car_food_name">{{item.goodsSpecsName}}</view>
										<view class="car_food_label">{{item.label}}</view>
									</view>
									<view class="car_edit_right">
										<!-- <view class="car_edit_btn" @click.stop="editGoods(idx,index,item,car.storeNo)">Edit</view> -->
										<!-- <image class="car_del_icon" @click.stop="editGoods(index,item)" :lazy-load="true"
											src="/static/icon/car/edit.png" style="width: 32rpx;height: 32rpx;"></image> -->
										<image class="car_del_icon" @click.stop="delGood(index,item)" :lazy-load="true"
											src="/static/icon/car/trash.png" style="width: 27rpx;height: 33rpx;"></image>
									</view>
								</view>
								<!--  价格 + 数量 + 数量加减按钮 -->
								<view class="car_food_bottom">
									<view class="car_food_price">
										￥ {{item.specsPrice?parseFloat(item.specsPrice).toFixed(2):'0.00'}}
									</view>
									<view class="info_num">
										<view class="minus" :class="item.num>1?'active':''" @click.stop="minus(item,index)">
											<view v-show="item.num>1">
												<image src="@/static/icon/car/minus.png" mode="widthFix"></image>
											</view>
											<view v-show="item.num<=1">
												<image src="@/static/icon/car/minus2.png" mode="widthFix"></image>
											</view>
										</view>
										<view class="number">{{item.num}}</view>
										<view class="plus" :class="item.num<item.quantity?'active':''" @click.stop="plus(item,index)">
											<view>
												<image src="@/static/icon/car/add.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view class="no_car_data" v-else @click="toBuyGoods">购物车中没有商品 <text>立即订购</text></view>

		<!-- 底部fixed Next部分 -->
		<view class="fixed_footer_next" v-if="all_num>0">
			<view class="next_box" @click="toNext">
				<view class="next_num">
					<view>{{total_number}}</view>
				</view>
				<view class="next_txt">去结算</view>
				<view class="next_price">￥{{total_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//购物车商品数据列表----数据示例
				goodsCars: [],
				total_number: 0, //已选中的购物车商品数量
				total_price: '0.00', //购物车商品总价格
				is_all_checked: 1, //是否全选  0：不是  1：是
				all_num: 1, //购物车商品总数量  用于判断购物车页面是否为空 
			}
		},
		onLoad() {
			this.getCartList();
		},
		onShow() {
			this.getCartList();
		},
		methods: {
			// toBuyGoods() {
			// 	uni.switchTab({
			// 		url: '/pages/index/index'
			// 	})
			// },
			/**
			 * 进入商品页
			 */
			toGoodsDetail(goodsId) {
				uni.setStorageSync('goods', {
					id: goodsId
				})
				uni.navigateTo({
					url: "/pages2/category/productDetail"
				})
			},
			/**
			 * 查询购物车数据
			 */
			getCartList() {
				// 获取初始化数据---获取后端接口返回的数据
				this.crud.get(this.path, "/api/client/all/shoppingCart/findPage?size=10").then(res => {
					res.data.data.records.forEach(item => {
						item.checked = false
					})
					this.goodsCars = res.data.data.records;
				})
			},
			/**
			 * 计算价格
			 */
			sumTotalPrice() {
				// 计算添加到购物车的数量和价格
				let total_number = 0;
				let total_price = 0;
				for (let i = 0; i < this.goodsCars.length; i++) {
					if (this.goodsCars[i].checked == 1) {
						this.is_all_checked = 1;
						total_number += parseInt(this.goodsCars[i].num);
						total_price += parseFloat(this.goodsCars[i].specsPrice * this.goodsCars[i].num).toFixed(2) * 100;
					}
				}

				this.clickHasSelect();
				this.total_number = total_number;
				this.total_price = parseFloat(total_price / 100).toFixed(2);
			},
			/**
			 * 减数量
			 */
			minus(item, index) {
				this.goodsCars[index].num--;
				if (this.goodsCars[index].num < 1) {
					this.goodsCars[index].num = 1;
				}
				// 选中某个商品才能计算该商品总价
				if (this.goodsCars[index].checked == 1) {
					this.sumTotalPrice();
				}
			},
			/**
			 * 加数量
			 */
			plus(item, index) {
				this.goodsCars[index].num++;
				// 选中某个商品才能计算该商品总价
				if (this.goodsCars[index].checked == 1) {
					this.sumTotalPrice();
				}
			},
			blurInput(e, number, index) {
				// 输入修改商品数量
				// console.log(e.detail.value,number,idx,index);
				if (e.detail.value == '') {
					e.detail.value = 0;
				}
				this.goodsProducts[index].num = e.detail.value;
				if (this.goodsProducts[index].checked == 1) {
					this.sumTotalPrice();
				}
			},
			/**
			 * 选中商品的数量计算
			 */
			clickHasSelect() {
				// 是否有选中商品
				let result1 = '';
				// console.log(JSON.stringify(this.goodsProducts));
				result1 = this.goodsCars.find(item => {
					return item.checked
				})
				// console.log(result1);
				if (result1 == undefined || result1 == 'undefined') {
					this.is_all_checked = 0;
				}
			},
			/**
			 * 选中商品
			 */
			clickSingleGood(index, item) {
				this.goodsCars[index].checked = !this.goodsCars[index].checked;
				this.sumTotalPrice();
				if (this.total_number == 0) {
					this.is_all_checked = 0;
				}
			},
			/**
			 * 删除购物车商品
			 */
			delGood(index, item) {
				// 删除某个商品
				this.goodsCars.splice(index, 1);
				this.clickHasSelect();
				this.sumTotalPrice(); //重新计算价格

				//删除购物车某个商品---调接口删除
				this.crud.del(this.path, "/api/client/all/shoppingCart/" + item.id).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: 'none'
					})
				})
			},
			/**
			 * 全选 
			 */
			clickAllSelect() {
				this.is_all_checked = !this.is_all_checked;
				this.isInitAllSelect();
			},
			/**
			 * 全选逻辑
			 */
			isInitAllSelect() {
				for (let i in this.goodsCars) {
					if (this.is_all_checked == 0) {
						this.goodsCars[i].checked = 0;
					} else {
						this.goodsCars[i].checked = 1;
					}
				}
				if (this.is_all_checked == 0) {
					// 取消全选
					this.total_number = 0;
					this.total_price = '0.00';
				} else {
					// 全选
					this.sumTotalPrice();
				}
			},
			/**
			 * 清空购物车
			 */
			clearCar() {
				this.all_num = 0;
				this.total_number = 0;
				this.total_price = '0.00';
				this.goodsProducts = [];
				// 清空购物车---调接口清空
				// clearCart().then((res) => {
				// 	if (res.code == 200) {
				// 		this.updateCartNum();
				// 	}
				// })
			},
			/**
			 * 去结算
			 */
			toNext() {
				if (this.total_number == 0) {
					uni.showToast({
						title: "请选择商品去结算",
						icon: "none"
					})
					return;
				}

				// 去结算的商品规格+数量
				let orderSpecses = []
				this.goodsCars.forEach(item => {
					if (item.checked == 1) {
						orderSpecses.push({
							goodsSpecsId: item.goodsSpecsId,
							num: item.num
						})
					}
				})
				uni.setStorageSync('orderSpecses', orderSpecses);
				uni.navigateTo({
					url: "/pages/fpage1/goods/createOrder"
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.car_home_box {
		font-size: 24rpx;

		.all_select_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 22rpx;
		}

		.car_home_name {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;

			view {
				font-weight: bold;
				font-size: 26rpx;
			}
		}
	}

	.car_home_foods {
		background-color: #ffffff;

		.car_food_item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #eaeaea;

			&:last-of-type {
				border-bottom: 0;
			}

			.car_food_info {
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				width: 100%;

				.car_food_img {
					width: 160rpx;
					height: 160rpx;
					border: 2rpx solid #dfe2e7;
					box-sizing: border-box;
					margin-right: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;

					.food_img {
						width: 100% !important;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.car_food_right {
					width: 72%;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.car_food_top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;

						.car_food_left {
							width: 75%;

							.car_food_name {
								font-size: 20rpx;
								font-weight: bold;
								margin: 5rpx 0;
							}

							.car_food_remark {
								// color: #868ea4;
								// font-style: italic;
								font-size: 24rpx;
								margin-bottom: 5rpx;
							}

							.car_food_label {
								color: #7E7E7E;
								font-size: 20rpx;
								margin-bottom: 5rpx;
							}
						}

						.car_edit_right {
							display: flex;
							align-items: center;
							justify-content: flex-end;

							.car_edit_btn {
								color: #DB0E7E;
								font-size: 24rpx;
								font-weight: bold;
								font-smooth: Roboto;
								display: inline-block;
								padding: 5rpx 15rpx;
								border-radius: 30rpx;
								border: 1px solid #DB0E7E;
								margin-right: 20rpx;
							}

							.car_del_icon {
								width: 24rpx;
								height: 30rpx;
							}
						}

						text {
							font-weight: bold;
							font-size: 28rpx;
						}
					}

					.car_food_bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.car_food_price {
							color: #DB0E7E;
							font-size: 26rpx;
							font-weight: 500;

							text {
								color: #8E8E8E;
								font-size: 22rpx;
								text-decoration: line-through;
								margin-left: 15rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}

	.fixed_footer_next {
		background: #DB0E7E;
		position: fixed;
		width: calc(100% - 50rpx);
		left: 25rpx;
		right: 25rpx;
		bottom: calc(var(--window-bottom, 0) + 30rpx);
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		// box-shadow: 0 -1rpx 30rpx #cccccc;
		border-radius: 10rpx;
	}

	.next_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.next_num {
			color: #ffffff;
			width: 20%;
			text-align: left;

			view {
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				border: 1px solid #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.next_price {
			width: 20%;
			color: #ffffff;
			text-align: right;
		}

		.next_txt {
			width: 30%;
			color: #ffffff;
			font-size: 26rpx;
			text-align: center;
		}
	}

	// 计数器 加减样式
	.info_num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		height: 50rpx;

		.minus {
			width: 40rpx;
			height: 40rpx;
			font-size: 40rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ADB5BD;

			// border: 5rpx solid #ADB5BD;
			// border-radius: 8rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}

			&.active {
				color: #000000;
				border-color: #000000;
			}

			.txt {
				height: 42rpx;
				line-height: 38rpx;
				/* #ifdef MP-ALIPAY */
				line-height: 35rpx;
				/* #endif */
			}
		}

		.plus {
			width: 40rpx;
			height: 40rpx;
			font-size: 40rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ADB5BD;

			// border: 5rpx solid #ADB5BD;
			// border-radius: 8rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}

			&.active {
				color: #000000;
				border-color: #000000;
			}

			.txt {
				height: 42rpx;
				line-height: 38rpx;
				/* #ifdef MP-ALIPAY */
				line-height: 35rpx;
				/* #endif */
			}
		}

		input {
			width: 100rpx;
			color: #000000;
			font-size: 28rpx;
		}

		.number {
			width: 100rpx;
			height: 40rpx;
			color: #000000;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.car {
		padding-bottom: 220rpx;
	}

	.car_del_icon {
		margin-right: 15rpx;
	}

	.no_car_data {
		text-align: center;
		padding-top: 250rpx;
		color: #333333;
		font-size: 24rpx;

		text {
			color: #DB0E7E;
			margin-left: 5rpx;
		}
	}

	.select_box {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.select_icon {
			display: block;
			width: 34rpx;
			height: 34rpx !important;
			border: 2rpx solid #cccccc;
			border-radius: 50%;
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx !important;
			}

			&.active {
				background: #DB0E7E;
			}
		}

		.del_all_icon {
			width: 24rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}
</style>
